<template>
<!--  <div class="row justify-center container-row" ref="el">-->
  <div class="container-wrapper" ref="el">
    <div class="row-padding justify-center container-xxl container-row">
<!--    <div class="col-8">-->
      <div class="breadcrumbs">
        <q-breadcrumbs class="text-grey" active-color="color">
          <q-breadcrumbs-el v-for="(item, index) in currentCategory" :key="index" :to="item.path" :label="item.name"/>
        </q-breadcrumbs>
      </div>
      <div class="row-title" v-if="$route.name !== 'pcGoods'">
        <span class="title">{{currentCategory.at(-1).name}}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, computed} from 'vue'
import { appStore } from "@/store/app.ts";
import {useRoute} from "vue-router";

defineProps({})

const emit = defineEmits([])

defineExpose({})

const store = appStore()
const route = useRoute()
const getCategoryId = (id) => {
  let findC = {}
  Object.keys(store.getCategory).forEach(key => {
    const result = store.getCategory[key].find((item) => {
      return item.id.toString() === id.toString()
    })
    if (result && result.name){
      findC = JSON.parse(JSON.stringify(result))
      return
    }
  })
  return findC
}

const currentCategory = computed(() => {
  console.log(route.name)
  let cate = []
  cate.splice(0, cate.length)
  if (route.name === "pcCategoryDesc"){
    const breadC = getCategoryId(route.params.id)
    cate.push({path: "/pc/category", name: "Category"})
    cate.push(breadC)
    console.log("matched", route.matched)
  }else if(route.name === "pcGoods"){
    const breadC = getCategoryId(store.getCurrentGoodsCategory)
    console.log("breadC", breadC)
    breadC.path = "/pc/category/" + breadC.id
    cate.push(breadC)
    cate.push({id: route.params.id, name: route.params.id})
    console.log(breadC)
  }else{
    cate.push({name: route.meta.title})
  }

  console.log(cate)
  cate.unshift({path: "/pc", name: "Home"})
  return cate
})
</script>

<style scoped lang='less'>
.container-wrapper{

}
.row-title{
  margin-bottom: 40px;
}
.breadcrumbs{
  height: 50px;
}
.row-padding{
  padding: 0 50px;
  align-items: center;
  .title{
    margin-bottom: 40px;
    font-size: 50px;
    font-weight: 600;
  }
}
:deep(.text-color){
  color: #101010;
  font-weight: 500;
  &:hover{
    color: gray;
  }
}
</style>